/* let element = (
  <div id="A1">
    A1
    <div id="B1">
      B1
      <div id="C1">C1</div>
      <div id="C2">C2</div>
    </div>
    <div id="B2">B2</div>
  </div>
); */

// 这种处理方法存在无法暂停的问题，会影响浏览器主进程的渲染
function render(element, parentDOM) {
  let dom = document.createElement(element.type);
  Object.keys(element.props)
    .filter((key) => key !== "children")
    .forEach((key) => {
      dom[key] = element.props[key];
    });
  // 处理子元素
  if (Array.isArray(element.props.children)) {
    element.props.children.forEach((child) => {
      render(child, dom);
    });
  }
  console.log(dom);
  parentDOM.appendChild(dom);
}
export default render;
